<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Expires" content="1000000" />
  <title>Document</title>
  <script src="../dist/vue.js"></script>
</head>
<body>
   <div id="root">
   </div>
</body>
<script>

  debugger;

  Vue.component("Button",{
    template:"<div @click='update'>{{ob.text}}</div>",
    props:{
      value:String
    },
    data(){
      return {
       ob:{
         text:321
       }
      }
    },
    methods: {
      update(){
        this.$set(this.ob,"text",123);
      }
    },
    created() {
      console.log("child created");
    },
    beforeMount() {
      console.log("child beforeMount"); 
    },
    mounted() {
      console.log("child mounted");
    },
  })

  new Vue({
    el:"#root",
    data:{
      msg:"hello world",
      text:"",
      type:"text"
    },
    created() {
      console.log("parent created");
    },
    beforeMount() {
      console.log("parent beforeMount");
    },
    mounted() {
      console.log("parent mounted");
    },
    template:"<div>Hello {{name}}<Button @click='test' :value='123'>hahah</Button><Button :value='456'></Button></div>",
    methods: {
      test(){
        console.log(123)
      }
    },
    computed:{
      name(){
        return "kay";
      }
    },
    watch:{
      msg(){
        console.log(123);
      }
    }
  })
</script>
</html>
